<template>
  <div class="index">
    <h2
      style="
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: #344563;
      "
    >新增入库单</h2>
    <div class="index-ron">
      <div class="block">
        <div class="block-top">
          <span class="demonstration">单据日期:</span>
          <el-date-picker v-model="value1" type="date" :disabled="true" placeholder="选择日期"></el-date-picker><br>入库单号：
          <el-input v-model="input" placeholder="请输入内容" :disabled="true"></el-input>
        </div>
        <div class="blokc-buttom">
          <div class="bznr">备注内容</div>
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
        </div>
      </div>
    </div>
    <h3>器材管理</h3>
    <table class="qcgl">
      <tr>
        <td class="onel">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="器材型号">
              <el-select v-model="form.region" placeholder="请选择你的器材">
                <el-option v-for="(v,i) in list" :key="i" :label="v" :value="v"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="器材名称">
              <el-select @change="gaibain" v-model="form.region1" placeholder="请选择你的器材">
                <el-option v-for="(v,i) in list1" :key="i" :label="v" :value="v"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </td>
        <td>
          入库数量
          <el-input v-model="input2" placeholder="请输入内容"></el-input>
        </td>
      </tr>
      <tr>
        <td>
          单价 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-input v-model="input3" placeholder="请输入内容"></el-input>
        </td>
        <td>
          金额： ￥
          <span>{{mount}}</span>
          <el-button type="success" @click="addminxi" class="left">加入明细</el-button>
        </td>
      </tr>
    </table>
    <div class="last">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="xuhao" label="序号"></el-table-column>
        <el-table-column prop="qicaiId" label="器材编号"></el-table-column>
        <el-table-column prop="qicainame" label="器材名称"></el-table-column>
        <el-table-column prop="guigeTybe" label="规格型号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="danwei" label="单位" show-overflow-tooltip></el-table-column>
        <el-table-column prop="qicaiNum" label="数量" show-overflow-tooltip></el-table-column>
        <el-table-column prop="price" label="单价" show-overflow-tooltip></el-table-column>
        <el-table-column prop="mouny" label="金额" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-delete" @click="deleshuju(scope.row.xuhao)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="nex">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage3"
          :page-size="5"
          layout="prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
        <span class="demonstration">直接前往</span>
      </div>
      <!-- 提交和取消按钮 -->
      <div class="addron">
        <el-button type="warning" @click="goku">取消</el-button>
        <el-button type="success" @click="succadd">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: "",
      value2: "",
      input: "",
      input1: "",
      input2: "",
      form: {
        region: "",
        region1: ""
      },
      qicaiid: 0,
      list: [],
      list1: [],
      input3: "",
      textarea: "",
      currentPage3: 1,
      total: 0,
      mouny: 10,
      qicid: 0,
      qc: 0,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      tableData: [],
      multipleSelection: []
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      //点击之后，回调多少页
    },
    deleshuju(e) {
      console.log(e);
      for (let i = 0; i < this.tableData.length; i++) {
        if ((this.tableData[i].xuhao = e)) {
          this.tableData.splice(i, 1);
        }
      }
    },
    gaibain() {
      this.list = [];

      this.$axios({
        url: "/wFacilityManagement/listMOdel",
        method: "get",
        params: {
          facilityName: this.form.region1
        }
      }).then(res => {
        for (let i = 0; i < res.data.data.length; i++) {
          this.list.push(res.data.data[i]);
        }
      });
    },
    switchDate: function(sj) {
      var now = new Date(sj);
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      return year + "-" + month + "-" + date;
    },
    //加入明细
    addminxi() {
      //生成明细
      this.$axios({
        url: "/wReceiptManagement/addNo",
        method: "get"
      }).then(res => {
        
        this.qicid = res.data.data;
        console.log(res,this.qicid);

        //查询器材编号
        this.$axios({
          url: "/wFacilityManagement/listNumber",
          method: "get",
          params: {
            facilityModel: this.form.region,
            facilityName: this.form.region1
          }
        }).then(res => {
          let con = {
            //入库单号

            xuhao: this.qicid,
            //器材编号
            qicaiId: res.data.data,
            qicainame: this.form.region1,
            guigeTybe: this.form.region,
            danwei: "台",
            qicaiNum: this.input2,
            price: this.input3,
            mouny: this.mouny
          };
          this.tableData.push(con);
          this.total++;
          this.input2="";
          this.input3=""
        });
      });
    },
    //成功添加
    succadd() {
      //把数据传给后端
      let date = new Date();
      let rq =
        date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate();
      console.log(rq);
      let datak = [];
      for (let i = 0; i < this.tableData.length; i++) {
        let kn = {
          quantity: this.tableData[i].qicaiNum,
          receiptNo: this.tableData[i].xuhao,
          unitPrice: this.tableData[i].mouny,
          wfacilityManagementId: this.tableData[i].qicaiId
        };
        datak.push(kn);
      }
      console.log(datak, datak[0].wfacilityManagementId);
      this.$axios({
        url: "/wReceiptManagement/add",
        method: "post",
        data: {
          //制单人
          preparedById: 2,
          receiptDate: this.value1,
          //入库单号
          receiptNo: datak[0].receiptNo,
          wreceiptDetailsAddDtos: datak
        }
      }).then(res => {
        console.log(res);
        this.tableData = [];
      });
    },
    //取消添加
    goku() {
      this.$router.push("/home/Rkgl");
    },
    xuanr() {
      this.value1 = new Date();
      this.$axios({
        url: "/wFacilityManagement/listName",
        method: "get"
      }).then(res => {
        console.log(res);
        for (let i = 0; i < res.data.data.length; i++) {
          this.list1.push(res.data.data[i]);
        }
        this.list = [];
      });
    }
  },
  mounted() {
    this.xuanr();
  },
  computed: {
    mount: function() {
      return this.input2 * this.input3;
    }
  }
};
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.addron {
  text-align: center;
}
.addron button {
  margin-left: 30px;
}
.nex {
  margin-top: 30px;
  display: flex;
  justify-content: right;
  margin-right: 20px;
  align-items: center;
}
.last .el-table__header-wrapper {
  height: 80px;
}
.last .el-table__body-wrapper {
  height: auto;
}
h2 {
  padding-top: 20px;
}
.left {
  float: right;
}
.index {
  padding: 30px;
}
table {
  width: 100%;
  margin: 30px;
}
.index-ron {
  margin: 30px;
}
.block .el-input {
  width: 700px;
  margin-right: 146px;
}
.nex {
  text-align: center;
  margin-top: 30px;
}
.demonstration {
  float: left;
  margin-right: 10px;
}
.blokc-buttom .el-textarea__inner {
  width: 1635px;
}
.el-textarea .el-textarea__inner {
  width: 1635px;
}
.el-textarea {
  width: 1635px;
}
td .el-input {
  width: 500px;
}
table {
  width: 1900px;
}
.hidden-columns {
  height: 0px;
}
.last .el-table__header-wrapper,
.el-table__body-wrapper {
  height: 100px;
  line-height: 30px;
}
.block {
  line-height: 40px;
}
.blokc-buttom {
  display: flex;
  align-items: center;
  margin-top: 30px;
}
.bznr {
  width: 70px;
  margin-right: 10px;
}
.qcgl td {
  margin-top: 20px;
  line-height: 50px;
}
.qcgl{
  width: 1400px;
}
.onel form {
  display: flex;
}
</style>